<template>
	<el-col :span="theSpan" :md="theMd" :sm="theSm" :xs="theXs" :lg="theLG" :xl="theXl" :offset="offset" :push="push" :pull="pull" :tag="tag">
		<slot />
	</el-col>
</template>
<script lang="ts" setup>
// 定义属性
const props = defineProps({
	// 栅格占据的列数
	span: Number,
	// 栅格左侧的间隔格数
	offset: {
		type: Number,
		default: 0,
	},
	// 栅格向右移动格数
	push: {
		type: Number,
		default: 0,
	},
	// 栅格向左移动格数
	pull: {
		type: Number,
		default: 0,
	},
	//自定义元素标签:html标签
	tag: {
		type: String,
		default: 'div',
	},
	// <768px 响应式栅格数或者栅格属性对象
	xs: [Number, Object],
	// ≥768px 响应式栅格数或者栅格属性对象
	sm: [Number, Object],
	// ≥992px 响应式栅格数或者栅格属性对象
	md: [Number, Object],
	// ≥1200px 响应式栅格数或者栅格属性对象
	lg: [Number, Object],
	// ≥1920px 响应式栅格数或者栅格属性对象
	xl: [Number, Object],
});
let golbalProps: any = inject('golbalProps', {});
// console.log(golbalProps);

// 定义方法
const theSpan = computed(() => {
	if (props.span) {
		return props.span;
	}
	return golbalProps.span;
});

const theXs = computed(() => {
	if (props.span) {
		return props.span;
	}
	if (props.xs) {
		return props.xs;
	}
	if (golbalProps.span) {
		return golbalProps.span;
	}
	if (golbalProps.xs) {
		return golbalProps.xs;
	}
	return 24;
});

const theSm = computed(() => {
	if (props.span) {
		return props.span;
	}
	if (props.sm) {
		return props.sm;
	}
	if (golbalProps.span) {
		return golbalProps.span;
	}
	if (golbalProps.sm) {
		return golbalProps.sm;
	}
	return 24;
});

const theMd = computed(() => {
	if (props.span) {
		return props.span;
	}
	if (props.md) {
		return props.md;
	}
	if (golbalProps.span) {
		return golbalProps.span;
	}
	if (golbalProps.md) {
		return golbalProps.md;
	}
	return 12;
});

const theLG = computed(() => {
	if (props.span) {
		return props.span;
	}
	if (props.lg) {
		return props.lg;
	}
	if (golbalProps.span) {
		return golbalProps.span;
	}
	if (golbalProps.lg) {
		return golbalProps.lg;
	}
	return 8;
});

const theXl = computed(() => {
	if (props.span) {
		return props.span;
	}
	if (props.xl) {
		return props.xl;
	}
	if (golbalProps.span) {
		return golbalProps.span;
	}
	if (golbalProps.xl) {
		return golbalProps.xl;
	}
	return 6;
});

// 初始化

// 输出
// const { theSpan, theXs, theSm, theMd, theLg, theXl } = toRefs(state);
</script>
<script lang="ts">
// 声明额外的选项
export default {
	name: 'zh-col',
	inheritallAttrs: false,
};
</script>
<style scoped lang="scss"></style>
